<template>
  <span>{{ formattedDate }}</span>
</template>

<script setup>
import { computed } from 'vue';
import dayjs from 'dayjs';
import customParseFormat from 'dayjs/plugin/customParseFormat';
import utc from 'dayjs/plugin/utc';
import timezone from 'dayjs/plugin/timezone';

// 加载插件
dayjs.extend(customParseFormat);
dayjs.extend(utc);
dayjs.extend(timezone);

const props = defineProps({
  /**
   * 日期值，可以是以下格式：
   * - 日期字符串 (YYYY-MM-DD)
   * - 日期时间字符串 (YYYY-MM-DD HH:mm:ss)
   * - 时间戳 (毫秒)
   * - Date 对象
   */
  value: {
    type: [String, Number, Date],
    required: true
  },
  
  /**
   * 自定义输出格式，默认为 MM/DD/YYYY
   */
  format: {
    type: String,
    default: 'MM/DD/YYYY'
  },
  
  /**
   * 当值无效时显示的文本
   */
  fallback: {
    type: String,
    default: '--'
  },
  
  /**
   * 指定时区，例如 'Asia/Shanghai'
   */
  timezone: {
    type: String,
    default: ''
  },
  
  /**
   * 自定义解析格式，用于特殊日期字符串格式
   */
  parseFormat: {
    type: String,
    default: ''
  }
});

const formattedDate = computed(() => {
  if (!props.value) return props.fallback;
  
  try {
    let date;
    
    // 处理特殊的解析格式
    if (props.parseFormat) {
      date = dayjs(String(props.value), props.parseFormat);
    } else {
      // 处理时间戳（检查是否需要转换为毫秒）
      if (typeof props.value === 'number') {
        // 如果时间戳是秒为单位，转换为毫秒
        const timestamp = props.value < 10000000000 
          ? props.value * 1000 
          : props.value;
        date = dayjs(timestamp);
      } else {
        date = dayjs(props.value);
      }
    }
    
    // 应用时区
    if (props.timezone) {
      date = date.tz(props.timezone);
    }
    
    // 检查日期是否有效
    if (!date.isValid()) return props.fallback;
    
    // 返回格式化后的日期
    return date.format(props.format);
  } catch (error) {
    console.error('日期格式化错误:', error);
    return props.fallback;
  }
});
</script>

<!-- 
使用示例：

1. 基本用法 - 将日期格式化为 MM/DD/YYYY
```vue
<DateFormatter value="2023-05-15" />
输出: 05/15/2023
```

2. 格式化日期时间字符串
```vue
<DateFormatter value="2023-05-15 14:30:00" />
输出: 05/15/2023
```

3. 格式化时间戳（毫秒）
```vue
<DateFormatter :value="1684123200000" />
输出: 05/15/2023
```

4. 格式化时间戳（秒）
```vue
<DateFormatter :value="1684123200" />
输出: 05/15/2023
```

5. 自定义输出格式
```vue
<DateFormatter value="2023-05-15" format="YYYY年MM月DD日" />
输出: 2023年05月15日
```

6. 处理无效日期
```vue
<DateFormatter value="无效日期" fallback="暂无数据" />
输出: 暂无数据
```

7. 指定时区
```vue
<DateFormatter value="2023-05-15" timezone="America/New_York" />
输出: 05/14/2023 (根据时区转换)
```

8. 使用自定义解析格式
```vue
<DateFormatter value="15/05/2023" parseFormat="DD/MM/YYYY" />
输出: 05/15/2023
```

注意事项：
1. 使用前需要安装 dayjs: npm install dayjs
2. 如果需要使用时区功能，请确保安装相关插件: npm install dayjs/plugin/timezone dayjs/plugin/utc
3. 组件自动处理秒和毫秒时间戳，无需手动转换
4. 当传入的日期无效时，默认显示 '--'，可通过 fallback 属性自定义
--> 